import React from "react";
import '../css/NavigationBar.css';

class NavigationBar extends React.Component{
    // 构造类的对象
    constructor(props){
        super(props);
        // 初始化组件的状态
        console.log(this.props);
        this.state = {
            title:""
        }
    }
    // 组件即将挂载时根据传递的props更新组件的状态
    componentWillMount(){
        console.log("componentWillMount");
        this.setState({
            title:this.props.title
        })
    }
    render() {
        console.log("render");
        return(
            <div className="navigationbar">
                <div className="navigationbar-header">
                    <button onClick={()=>{
                        this.props.sendMessage("我是自组件传递给父组件的数据")
                    }}>点击</button>
                    {/* <div>{this.props.title}</div> */}
                    <div>{this.state.title}</div>
                    <div>编辑</div>
                </div>
            </div>
        )
    }
    componentDidMount(){
        console.log("componentDidMount");
    }
    componentWillReceiveProps(props){
        console.log(props);
        console.log(this.props);
        this.props = props;
        this.setState({
            title:this.props.title,
        })
    }
    shouldComponentUpdate(){
        return true;
    }
    componentWillUpdate(){
        console.log("componentWillUpdate");
    }
    componentDidUpdate(){
        console.log("componentDidUpdate");
    }
    componentWillUnmount(){
        
    }
}

export default NavigationBar;